<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
  <meta name="referrer" content="origin-when-cross-origin">
  <!--
    Preconnect to essential domains
  -->
  <link rel="preconnect" href="https://bsky.social">
  <link rel="preconnect" href="https://go.bsky.app">
  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>

  <!-- Hello Humans! API docs at https://atproto.com -->

  <link rel="preload" as="font" type="font/woff2" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>

  <style>
    /**
     * Minimum styles required to render splash.
     *
     * ALL OTHER STYLES BELONG IN `src/style.css`
     *
     * THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
     */
    @font-face {
      font-family: 'InterVariable';
      src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'InterVariableItalic';
      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
      font-weight: 300 1000;
      font-style: italic;
      font-display: swap;
    }
    html {
      background-color: white;
    }
    @media (prefers-color-scheme: dark) {
      html {
        background-color: black;
      }
    }
    html,
    body {
      margin: 0px;
      padding: 0px;
      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
      text-rendering: optimizeLegibility;
      /* Platform-specific reset */
      -webkit-overflow-scrolling: touch;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: scrollbar;
      font-synthesis-weight: none;
    }
    html,
    body,
    #root {
      display: flex;
      flex: 1 0 auto;
      min-height: 100%;
      width: 100%;
    }
    #splash {
      position: fixed;
      width: 100px;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%) translateY(-50px);
    }
    /**
     * We need these styles to prevent shifting due to scrollbar show/hide on
     * OSs that have them enabled by default. This also handles cases where the
     * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
     * shift the content, by forcing the page to show a scrollbar.
     */
    body {
      width: 100%;
      overflow-y: scroll;
    }
  </style>

  {% include "scripts.html" %}
  <link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ staticCDNHost }}/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ staticCDNHost }}/static/favicon-16x16.png">
  <link rel="mask-icon" href="{{ staticCDNHost }}/static/safari-pinned-tab.svg" color="#1185fe">
  <meta name="theme-color">
  <meta name="application-name" content="Bluesky">
  <meta name="generator" content="bskyweb">
  <meta property="og:site_name" content="Bluesky Social">
  <meta property="og:logo" content="{{ favicon }}">
  <meta name="twitter:site" content="@bluesky" />
  <link type="application/activity+json" href="" />

  {% block html_head_extra -%}{%- endblock %}
</head>
<body>
{%- block body_all %}
  <div id="root">
    <div id="splash">
      <!-- Bluesky SVG -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
    </div>
  </div>

  <noscript>
    <h1 lang="en">JavaScript Required</h1>
    <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
    <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>.
    {% block noscript_extra %}{% endblock %}
  </noscript>
{% endblock -%}
</body>
</html>
